<!--
 * @Description: 
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-04-23 11:49:20
 * @LastEditors: ljz
 * @LastEditTime: 2022-08-27 20:38:21
-->
<template>
    <div class="container full-screen">
        <!-- 1左侧 -->
        <div class="left flexcbh position-re pro-bgcolor544 p-20">
            <pro-title label="未检测名单"></pro-title>

            <div
                class="left-content fx1 flexcsh"
                v-loading="loading2"
                element-loading-background="rgba(0, 0, 0, 0.3)"
            >
                <div class="search_box m-b10">
                    <el-input
                        v-model="enterprise.queryForm2.company_name"
                        placeholder="请输入内容"
                    ></el-input>
                    <div class="search_btn flexrcc" @click="searchCompany2">
                        <span class="txt">搜 索</span>
                    </div>
                    <div class="reset_btn flexrcc" @click="searchCompany2(2)">
                        <span class="txt">重 置</span>
                    </div>
                </div>
                <div class="grade_box m-b10">
                    <div
                        class="sort_btn flexrcc"
                        :class="enterprise.queryForm2.type == 1 ? 'active' : ''"
                        @click="searchCompany2(11)"
                    >
                        <span class="txt">全部</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="enterprise.queryForm2.type == 2 ? 'active' : ''"
                        @click="searchCompany2(22)"
                    >
                        <span class="txt">密接人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="enterprise.queryForm2.type == 3 ? 'active' : ''"
                        @click="searchCompany2(33)"
                    >
                        <span class="txt">三出人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="enterprise.queryForm2.type == 4 ? 'active' : ''"
                        @click="searchCompany2(44)"
                    >
                        <span class="txt">七类人员</span>
                    </div>
                </div>

                <div class="fx1 hidden">
                    <StaticTable
                        :columns="enterprise.columns2"
                        :data-list="enterprise.data2"
                        headBg="rgba(22, 159, 196, 0.2)"
                        border_color="rgba(22, 159, 196, 0.25)"
                        @onRow="onRow2"
                        headHeight="36"
                        rowHeight="40"
                    >
                    </StaticTable>
                </div>
                <!-- 分页 -->
                <ProPage
                    :pages="enterprise.pages2"
                    :total="enterprise.total2"
                    ref="ref_page2"
                    @on_page="changePage($event, 28)"
                ></ProPage>
            </div>
        </div>

        <!-- 中间 -->
        <!-- <div class="middle" v-show="compnyType" @click.stop="() => {}">
            <div class="middle-top hidden flexcb m-b20">
                <div class="middle-top-title flexrb w-text">
                    <div class="fontsize16 pointer">选择行业分类</div>
                    <div class="fontsize12 pointer" @click="closeOnshow">
                        关闭 X
                    </div>
                </div>
                <div class="middle-top-content fx1 hidden">
                    <div
                        :class="[
                            'content-item',
                            'pointer',
                            'hidden',
                            item.cols == 2 ? 'across-col2' : '',
                            item.dictValue == enterprise.queryForm.industry_type
                                ? 'active_type'
                                : '',
                        ]"
                        v-for="(item, index) in company_type"
                        :key="index"
                        @click.stop="getData(item.dictLabel, item.dictValue)"
                    >
                        {{ item.dictLabel }}
                    </div>
                </div>
            </div>
        </div> -->

        <!-- 3 右侧 -->
        <div class="right flexcbh position-re pro-bgcolor544 p-20">
            <pro-title label="重点人员"></pro-title>

            <div
                class="right-content fx1 flexcsh"
                v-loading="loading2"
                element-loading-background="rgba(0, 0, 0, 0.3)"
            >
                <div class="search_box m-b10">
                    <el-input
                        v-model="enterprise.queryForm2.company_name"
                        placeholder="请输入内容"
                    ></el-input>
                    <div class="search_btn flexrcc" @click="searchCompany2">
                        <span class="txt">搜 索</span>
                    </div>
                    <div class="reset_btn flexrcc" @click="searchCompany2(2)">
                        <span class="txt">重 置</span>
                    </div>
                </div>
                <div class="grade_box m-b10">
                    <div
                        class="sort_btn flexrcc"
                        :class="
                            enterprise.queryForm2.grade == 1 ? 'active' : ''
                        "
                        @click="searchCompany2(11)"
                    >
                        <span class="txt">全部</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="
                            enterprise.queryForm2.grade == 2 ? 'active' : ''
                        "
                        @click="searchCompany2(22)"
                    >
                        <span class="txt">密接人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="
                            enterprise.queryForm2.grade == 3 ? 'active' : ''
                        "
                        @click="searchCompany2(33)"
                    >
                        <span class="txt">三出人员</span>
                    </div>
                    <div
                        class="sort_btn flexrcc"
                        :class="
                            enterprise.queryForm2.grade == 4 ? 'active' : ''
                        "
                        @click="searchCompany2(44)"
                    >
                        <span class="txt">七类人员</span>
                    </div>
                </div>

                <div class="fx1 hidden">
                    <StaticTable
                        :columns="enterprise.columns2"
                        :data-list="enterprise.data2"
                        headBg="rgba(22, 159, 196, 0.2)"
                        border_color="rgba(22, 159, 196, 0.25)"
                        @onRow="onRow2"
                        headHeight="36"
                        rowHeight="40"
                    >
                    </StaticTable>
                </div>
                <!-- 分页 -->
                <ProPage
                    :pages="enterprise.pages2"
                    :total="enterprise.total2"
                    ref="ref_page2"
                    @on_page="changePage($event, 28)"
                ></ProPage>
            </div>
        </div>

        <!-- 4弹窗列表 -->
        <div class="dialog_box flexrcc" v-if="enterprise.open_detail">
            <ListDetail
                :title="enterprise.detail_title"
                @close_info="onCloseInfo"
            >
                <div class="full-screen hidden">
                    <div class="p-row30">
                        <EpiContentNav
                            :list="enterprise.detail_btn"
                            @change="changeContent"
                        ></EpiContentNav>
                    </div>

                    <div
                        v-if="enterprise.cut_content == 1"
                        class="dialog_content1 flexcsc"
                    >
                        <div class="item top m-b20">
                            <div class="flex m-b10">
                                <div class="label">姓名：</div>
                                <div class="label">张三</div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">性别：</div>
                                <div class="label">男</div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">年龄：</div>
                                <div class="label">32</div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">联系电话：</div>
                                <div class="label">15278913245</div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">身份证号：</div>
                                <div class="label">450502198301215678</div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">居住地址：</div>
                                <div class="label">xxxxxx</div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">所属村镇网格：</div>
                                <div class="value">
                                    第一网格
                                    <div class="word">
                                        （负责人：张三 15278912345）
                                    </div>
                                </div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">所属行业网格：</div>
                                <div class="value">
                                    南康中学
                                    <div class="word">
                                        （负责人：张三 15278912345）
                                    </div>
                                </div>
                            </div>
                            <div class="flex m-b10">
                                <div class="label">标签：</div>
                                <div class="box">常住人口</div>
                                <div class="box">户籍人口</div>
                            </div>
                        </div>
                    </div>
                    <div
                        v-else-if="enterprise.cut_content == 2"
                        class="full-screen flexcb"
                    >
                        <div class="fx1 hidden">
                            <StaticTable
                                :columns="list_columns"
                                :data-list="list_info"
                                headBg="rgba(22, 159, 196, 0.2)"
                                border_color="rgba(22, 159, 196, 0.25)"
                                headHeight="36"
                                @onClick="onClickDetail"
                            >
                                <!-- <template v-slot:col4="{ row }">
                                    <div class="w-text">
                                        {{ getType(row.col4) }}
                                    </div>
                                </template>
                                <template v-slot:col6="{ row }">
                                    <div class="w-text">
                                        {{ getResult(row.col6) }}
                                    </div>
                                </template> -->
                            </StaticTable>
                        </div>
                        <!-- 分页 -->
                        <ProPage
                            :pages="enterprise.pages"
                            ref="ref_special"
                            @on_page="changePage($event, 28)"
                        ></ProPage>
                    </div>
                </div>
            </ListDetail>
        </div>
    </div>
</template>

<script>
import ProTitle from "@/components/Pro/ProTitle";
import ProTitle2 from "@/components/Pro/ProTitle2";
import StaticTable from "@/components/Common/StaticTable.vue";
import ProShade from "./ProShade";
import ListDetail from "./ListDetail";
import DynamicTable from "@/components/Common/DynamicTable.vue";
import ProPage from "./ProPage";
import EpiContentNav from "./EpiContentNav";

import { my_option } from "@/utils/mock/proview/person";

import {
    getCompany,
    listCompanyWork,
    listWork,
    detailWork,
    statisticalWork,
    getNoDetectList,
} from "@/api/proview.js";
// import { log } from "video.js";

export default {
    name: "NavPerson",
    components: {
        ProTitle,
        ProTitle2,
        DynamicTable,
        StaticTable,
        ProShade,
        PieChart,
        LineChart,
        BarChart,
        ListDetail,
        ProPage,
        EpiContentNav,
    },
    props: {
        company_type: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            loading_company: false,
            compnyType: false,
            more: "全部行业", // 行业分类 (当前名称)
            //企业信息-------------------------------
            enterprise: {
                data: [],
                columns: my_option.columns_table,
                cut_companyid: "",
                queryForm: {
                    sort_by: false, // asc (true) 正序  desc(false) 倒序
                    industry_type: "",
                    company_name: "",
                },
                queryForm2: {
                    company_id: "",
                    pageSize: 13,
                    pageNum: 1,
                    type: 1,
                },
                columns2: [
                    {
                        label: "序号",
                        prop: "title",
                        width: "60",
                    },
                    {
                        label: "姓名",
                        prop: "col2",
                    },
                    {
                        label: "联系电话",
                        prop: "col3",
                    },
                    {
                        label: "所属网格",
                        prop: "col4",
                    },
                    {
                        label: "轮次",
                        prop: "col5",
                    },
                ],
                data2: [
                    {
                        title: 1,
                        col2: "红花根村",
                        col3: "彬池村",
                        col4: 546,
                        col5: 1,
                    },
                    {
                        title: 2,
                        col2: "红花根村",
                        col3: "彬池村",
                        col4: 546,
                        col5: 1,
                    },
                    {
                        title: 3,
                        col2: "红花根村",
                        col3: "彬池村",
                        col4: 546,
                        col5: 1,
                    },
                ],
                open_detail: false,
                detail_title: "重点人员信息",
                pages: 1,
                cut_content: 1,
                detail_btn: [
                    { label: "个人信息", id: 1 },
                    { label: "检测记录", id: 2 },
                ],
            },
            // 地图点的集合
            MarkerData: [],

            // 右侧--------------------------------

            // 列表明细弹出层--------------------------
            open_detail: false,
            detail_title: "详情",
            list_columns: my_option.personnel_columns,
            list_info: [],
            // 作业详情弹出层----------------------------
            open_detail2: false,
            detail2_title: "作业明细",
            detail2_info: {},

            loading2: false,
        };
    },
    computed: {
        // 0 计算是否 跨列
        getAcrossCol() {
            return (p) => {
                if (p == 3) return "across-col3";
                else if (p == 2) return "across-col2";
                else return "";
            };
        },
        // 全局点击
        isHandleGlobal() {
            return this.$store.state.handle_num;
        },
    },

    watch: {
        // 全局点击
        isHandleGlobal(n, o) {
            this.closeOnshow();
        },
    },

    created() {
        // this.getData();
        // this.statisticalWork();
        // this.getNoDetectList();
    },
    mounted() {},
    methods: {
        /** 关闭地图的消息弹窗(给父组件调用) */
        closeMap(id) {
            this.MarkerData.forEach((item) => {
                if (id == this.enterprise.cut_companyid) {
                    // 点击x号 关闭 当前消息窗口
                    item.grade = 28;
                } else {
                    // 点击另外的地图标点, 关闭旧窗口, 打开新窗口时, 保留新窗口的icon高亮
                    if (item.id != this.enterprise.cut_companyid) {
                        item.grade = 28;
                    }
                }
            });
        },
        /** 点击地图弹窗详情(给父组件调用) */
        detailMap(id) {
            this.enterprise.open_detail = true;
            this.open_detail = false;
            // this.enterprise.cut_companyid = id;
        },

        async getNoDetectList() {
            const res = await getNoDetectList();
            console.log(res.data);
        },

        /** 点击企业列表 的某列 */
        onClick(row, col) {
            if (col.prop == "title") {
                this.enterprise.open_detail = true;
                this.enterprise.detail_title = row.title;
                // this.getCompany(row.id);
                this.enterprise.cut_companyid = row.id;
                this.enterprise.open_detail = true;
                this.open_detail = false;
            } else if (col.prop == "col3") {
                this.getIntroduction(row.id, true);
            } else if (col.prop == "col4") {
                this.enterprise.open_detail = false;
                this.open_detail = true;
                this.detail_title = row.title;
                this.enterprise.queryForm2.company_id = row.id;
                this.enterprise.queryForm2.pageNum = 1;
                if (this.$refs["ref_special"])
                    this.$refs["ref_special"].resetPage();
                this.listWork();
            }
            // this.$emit("onClick", row, col);
        },
        //
        onClickDetail(row, col) {
            this.detail2_title = row.col3;
            if (col.prop == "col7") {
                this.open_detail2 = true;
                this.detailWork(row.id);
            }
        },
        /** 点击table 头部某列 */
        onHeadCol(col) {
            if (col.prop == "col2") {
                this.enterprise.queryForm.sort_by =
                    !this.enterprise.queryForm.sort_by;
                this.getData(this.more);
                return;
            }
        },
        /** 关闭列表明细 */
        onCloseInfo() {
            this.enterprise.open_detail = false;
        },
        /** 关闭详情 */
        onCloseDetail() {
            this.open_detail2 = false;
        },
        /** 重置弹窗数据 */
        reset() {
            this.enterprise.open_detail = false;
            this.$refs["ref_detail"].reset();
        },
        /** 分页切换 */
        changePage(num, type) {
            if (type == 28) {
                this.enterprise.queryForm2.pageNum = num;
                this.listWork();
            }
        },
        // 显示行业分类
        onShow() {
            this.compnyType = true;
        },
        closeOnshow() {
            this.compnyType = false;
        },
        // 搜索
        searchCompany(type = 1) {
            // this.enterprise.queryForm2.pageNum = 1;
            // if(this.$refs['ref_special']) this.$refs['ref_special'].resetPage()
            if (type == 2) {
                this.enterprise.queryForm.company_name = "";
            }
            this.getData(this.more, this.enterprise.queryForm.industry_type);
        },

        onRow2(row) {
            this.enterprise.open_detail = true;
        },
        /** 搜索 */
        searchCompany2(type = 1) {
            if (type == 2) {
                this.enterprise.queryForm2.date = "";
                this.enterprise.table_date = null;
            } else if (type == 11) {
                this.enterprise.queryForm2.type = 1;
            } else if (type == 22) {
                this.enterprise.queryForm2.type = 2;
            } else if (type == 33) {
                this.enterprise.queryForm2.type = 3;
            } else if (type == 44) {
                this.enterprise.queryForm2.type = 4;
            }
            // this.getData2();
        },

        /** 弹窗内容切换 */
        changeContent(id) {
            this.enterprise.cut_content = id;
        },

        /** 点击地图标点emit=false  点击table弹出简介信息时emit=true */
        getIntroduction(id, emit = false) {
            this.enterprise.cut_companyid = id;
            getCompany(id).then((res) => {
                if (res.code == 0) {
                    let data = res.data;
                    this.enterprise.detail_title = data.company_name;

                    let temp = [
                        {
                            label: "名称",
                            value: data.company_name,
                        },
                        {
                            label: "行业类型",
                            value: this.getIndustry(data.industry_type),
                            is_industry: true,
                        },
                        {
                            label: "法定代表人",
                            value: data.legal_name,
                        },
                        {
                            label: "法人电话",
                            value: data.legal_phone,
                            is_tel: false,
                        },
                        {
                            label: "查看详情",
                            value: "",
                            is_detail: true,
                            is_video: false,
                        },
                    ];

                    this.MarkerData.forEach((item) => {
                        if (item.id == id) {
                            item.introduction = temp;
                            item.grade = 31;
                            if (emit) {
                                this.$emit("onClick", item); // 点击table某列 响应的事件
                            } else {
                                this.$emit("changeFlag", item); // 点击地图icon 响应的事件
                            }
                        } else {
                            item.grade = 28;
                        }
                    });
                }
            });
        },
    },
};
</script>

<style lang="scss">
.el-image-viewer__wrapper {
    top: vh(100);
    bottom: vh(100);
    left: vh(200);
    right: vh(200);
}

.el-loading-spinner .circular .path {
    stroke: #2ef7fc !important;
}
</style>

<style lang="scss" scoped>
.container {
    ::v-deep .el-input__inner {
        color: white;
    }
    ::v-deep .el-input--medium .el-input__inner {
        background-color: #002440;
        border: 1px solid #094666;
    }

    // background-color: aqua;   // 其子元素脱离的标准流
    .left {
        position: absolute;
        z-index: 12;
        left: vw(30);
        top: vh(88);
        bottom: vh(40);
        width: vw(484);

        .left-content {
            .search_box {
                display: grid;
                grid-template-columns: 5fr 2fr 2fr;
                grid-gap: vh(20) vw(20);
                .search_btn {
                    cursor: pointer;
                    padding: 0px 10px;
                    height: 36px;
                    background: linear-gradient(
                        180deg,
                        #033748 0%,
                        #169fc4 100%
                    );
                    border: 1px solid rgba(41, 173, 249, 0.4);
                    .txt {
                        font-size: 14px;
                        color: white;
                    }
                }
                .reset_btn {
                    cursor: pointer;
                    padding: 0px 10px;
                    height: 36px;
                    background: #002440; // 16171F
                    border: 1px solid rgba(41, 173, 249, 0.4);
                    .txt {
                        font-size: 14px;
                        color: white;
                    }
                }
            }
            .grade_box {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                .sort_btn {
                    cursor: pointer;
                    padding: 0px 10px;
                    height: vh(32);
                    background: #002440; // 16171F
                    border: 1px solid rgba(22, 159, 196, 0.25);
                    .txt {
                        font-size: 14px;
                        color: white;
                    }
                    &.active {
                        background: rgba(22, 159, 196, 0.2);
                        .txt {
                            color: #61ffff;
                        }
                    }
                }
            }
        }
    }
    .middle {
        position: absolute;
        z-index: 13;
        left: vw(528);
        top: vh(88);
        // bottom: vh(82);
        background: #002440;
        box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.6);
        padding: vh(5) vw(20) vh(20);
        .middle-top {
            width: vw(550);
            .middle-top-title {
                padding: vh(12) 0;
            }
            .middle-top-content {
                display: grid;
                grid-template-columns: [c1] 1fr [c1e c2] 1fr [c2e c3];
                gap: vh(5) vw(5);
                grid-auto-flow: row dense;
                // align-items: center;
                align-content: center;
                text-align: center;
                .content-item {
                    padding: vh(8) vw(5);
                    background: rgba(22, 159, 196, 0.08);
                    border: 1px solid rgba(22, 159, 196, 0.08);
                    border-radius: 2px;
                    font-size: vh(14);
                    color: #ffffff;
                    &.across-col2 {
                        // grid-row-start: r2;
                        // grid-row-end: r3;
                        grid-column-start: c1;
                        grid-column-end: c2e;
                    }
                    &.active_type {
                        background: #0e5570 !important;
                        border: 1px solid #169fc4 !important;
                    }
                }
            }
        }
    }

    .right {
        position: absolute;
        z-index: 12;
        right: vw(30);
        top: vh(88);
        bottom: vh(40);
        width: vw(480);

        .right-content {
            .search_box {
                display: grid;
                grid-template-columns: 5fr 2fr 2fr;
                grid-gap: vh(20) vw(20);
                .search_btn {
                    cursor: pointer;
                    padding: 0px 10px;
                    height: 36px;
                    background: linear-gradient(
                        180deg,
                        #033748 0%,
                        #169fc4 100%
                    );
                    border: 1px solid rgba(41, 173, 249, 0.4);
                    .txt {
                        font-size: 14px;
                        color: white;
                    }
                }
                .reset_btn {
                    cursor: pointer;
                    padding: 0px 10px;
                    height: 36px;
                    background: #002440; // 16171F
                    border: 1px solid rgba(41, 173, 249, 0.4);
                    .txt {
                        font-size: 14px;
                        color: white;
                    }
                }
            }
            .grade_box {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                .sort_btn {
                    cursor: pointer;
                    padding: 0px 10px;
                    height: vh(32);
                    background: #002440; // 16171F
                    border: 1px solid rgba(22, 159, 196, 0.25);
                    .txt {
                        font-size: 14px;
                        color: white;
                    }
                    &.active {
                        background: rgba(22, 159, 196, 0.2);
                        .txt {
                            color: #61ffff;
                        }
                    }
                }
            }
        }
    }

    .iconfont {
        margin-right: vw(5);
    }

    .work_detail_box {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 2000;
        background-color: rgba(0, 0, 0, 0.5);
        .work_detail {
            width: vw(520);
            height: vh(692);
            .content_box {
                font-size: vh(14);
                // display: grid;
                // grid-template-columns: [c1] vw(90) [c1e c2] 1fr [c2e c3];
                // grid-template-rows: auto;
                // gap: vh(20) vw(20);
                .row-box {
                    display: grid;
                    grid-template-columns: vw(110) 1fr;
                    gap: 0 vw(10);
                    align-items: center;
                    margin-bottom: vh(10);
                    .label {
                        height: 100%;
                        padding: vh(9) vw(8);
                        // background: rgba(22, 159, 196, 0.2);
                        font-family: "Microsoft YaHei UI";
                        font-size: vh(14);
                        color: #2ef7fc; // 2ef7fc
                    }
                    .value {
                        // padding: vh(9) vw(14);
                        font-family: "Microsoft YaHei UI";
                        font-size: vh(14);
                        color: #ffffff; // 2ef7fc
                        .value_card {
                            .card_info {
                            }
                            .img_bx {
                                width: vw(88);
                                height: vw(88);
                            }
                        }
                    }

                    &.across-col2 {
                        grid-column-start: c2;
                        grid-column-end: c3e;
                    }
                    &.across-col3 {
                        grid-column-start: c1;
                        grid-column-end: c3e;
                    }
                }
                .img-box {
                    padding: vh(9) vw(32) !important;
                    width: 100%;
                    // display: grid;
                    // grid-template-columns: repeat(2, 1fr);
                    // gap: vh(10) vw(10);
                    .img-box-item {
                        height: vh(140);
                        width: vw(240);
                    }
                    .company-page {
                        height: vh(68);
                        width: vw(32);
                        background: rgba(22, 159, 196, 0.25);
                    }
                    .company-leftpage {
                        top: calc(50% - vh(34));
                        left: 1px;
                    }
                    .company-rightpage {
                        top: calc(50% - vh(34));
                        right: 1px;
                    }
                }
            }
        }
    }

    // 弹出层
    .dialog_box {
        position: absolute;
        z-index: 15;
        left: 0;
        top: vh(56);
        height: calc(100% - vh(56));
        width: 100%;
        background: rgba(0, 6, 17, 0.5);
        backdrop-filter: blur(20px);

        .dialog_content1 {
            .item {
                width: vw(480);
                background: rgba(22, 159, 196, 0.2);
                border: 1px solid rgba(22, 159, 196, 0.25);
                padding: vh(24) vw(20);

                .label {
                    color: #fff;
                    margin-right: vw(10);
                }
                .value {
                    color: #2ef7fc;
                }

                .word {
                    color: #fff;
                    display: inline-block;
                }

                .box {
                    width: vw(72);
                    height: vw(24);
                    background: rgba(45, 255, 205, 0.16);
                    border: 1px solid rgba(45, 255, 205, 0.32);
                    border-radius: 2px;
                    color: #2dffcd;
                    font-size: vw(12);
                    text-align: center;
                    padding: vw(3) 0 0 0;
                    margin-left: vw(16);
                }
            }
        }
    }
}
</style>
